Native HTML5 drag-and-drop lacks real-time visual feedback and smooth interactions. This PR migrates matrix reordering to Atlassian's Pragmatic Drag and Drop library and adds spring-based physics animations to make reordering actions clear and visually intuitive.

Changes

Dependencies

• Added @atlaskit/pragmatic-drag-and-drop@^1.7.7 (~4.7kB)

Matrix Component (src/components/matrix.tsx)

• Replaced native draggable/onDragStart/onDragEnter with draggable() and dropTargetForElements() adapters
• Added drag state management (isDragging) for visual feedback on the dragged element
• Changed props: removed synthetic event handlers, added index, matrixId, isAnimating, onDragEnter, onDragLeave, and onReorder(from, to)
• Added data-matrix-id attribute for animation tracking
• Removed scale/highlight effect during drag hover
• Updated onDragEnter to pass source index for immediate canvas preview

App Component (src/app.tsx)

• Removed DOM traversal (childIndex) for determining drag source/target indices
• Simplified to pass index directly to Matrix components
• Implemented fast spring-based physics animations using the same spring library as Canvas (stiffness: 300, damping: 30):
  • ~2x faster than typical spring animations for responsive interactions
  • Captures element positions before reordering
  • Creates spring instances for each moving element
  • Animates using requestAnimationFrame with natural physics
  • Automatically cleans up when springs settle
• Added immediate canvas preview during drag:
  • handleDragEnter dispatches move immediately when hovering over a target
  • Canvas updates in real-time showing the potential result
  • Preserves playful, exploratory interaction
  • Animation plays after drop without blocking further drags
• Added containerRef to track the parent container
• Added isAnimating state (non-blocking - can drag during animation)
• Added insertionIndex state to show vertical line indicator at drop position
• Added cleanup effect to cancel animation frames on unmount

Styles (src/components/matrix.module.css)

• .dragging: 50% opacity, grabbing cursor
• .animating: pointer-events: none to prevent interaction during animation
• Removed .draggedOver class (no more scale/highlight effect)
• Removed transform from transition property (now handled by springs)

Styles (src/app.module.css)

• .insertionIndicator: Vertical blue line (3px wide, #3b82f6) showing insertion point during drag
• Made .section position relative to contain the indicator
• Indicator has rounded corners and appears above matrices with z-index: 10

Animation Details

Fast Spring Physics:

• Uses the same createSpring() utility as the Canvas component
• Spring parameters: stiffness: 300, damping: 30 (~2x faster than Canvas springs)
• Smooth, natural-feeling motion with proper physics
• Each matrix animates independently with its own spring
• Animation automatically stops when all springs settle
• Natural overshoot and bounce behavior
• Fast enough to not block user interactions

Immediate Canvas Preview:

• Canvas updates instantly when dragging over a drop target
• Shows exactly what the result will be in real-time
• State update happens during drag, not after drop
• Animation is decoupled - plays after drop without blocking
• Restores the playful, exploratory nature of direct manipulation

Insertion Indicator:

• Blue vertical line appears at the drop position during drag
• Shows exactly where the dragged matrix will be inserted
• Clearer intent than scale/highlight effect
• Position calculated based on target matrix index

This provides clear visual feedback showing:

• Which matrix was moved (semi-transparent during drag)
• Exactly where it will be inserted (blue vertical line)
• Real-time canvas preview of the result
• Other matrices smoothly sliding out of the way with fast spring physics
• All movements synchronized and fluid with natural motion

Example

// Before: native events with DOM traversal
<div draggable onDragStart={e => setDragging(e.target)} 
     onDragEnter={e => {
       const from = childIndex(dragging)
       const to = childIndex(e.target)
       dispatch({ type: 'move', from, to })
     }}>

// After: declarative hooks with spring animations and instant preview
useEffect(() => {
  return draggable({
    element: ref.current,
    getInitialData: () => ({ index }),
    onDragStart: () => setIsDragging(true),
  })
}, [index])

useEffect(() => {
  return dropTargetForElements({
    element: ref.current,
    onDragEnter: ({ source }) => {
      // Instant canvas preview
      onDragEnter?.(source.data.index)
    },
    onDrop: ({ source }) => {
      // Fast spring animation after drop
      onReorder?.(source.data.index, index)
    },
  })
}, [index, onReorder])

// Fast spring-based animation loop
const springs = new Map()
const animate = (currentTime) => {
  springs.forEach((spring, el) => {
    if (spring.update(delta)) {
      el.style.transform = `translate(${spring.value.x}px, ${spring.value.y}px)`
    }
  })
  if (anyActive) requestAnimationFrame(animate)
}

Visual Feedback

Initial state:

During drag:

• Canvas updates instantly showing the result
• Blue vertical line appears at the insertion point
• Dragged matrix becomes semi-transparent
• Can see transformation in real-time

After drop:

Matrices smoothly animate to their new positions with fast spring physics (~2x faster than previous implementation). The animation completes quickly without blocking further interactions. Users can drag again immediately while the previous animation is still settling.

The natural bounce and overshoot from the spring physics makes the motion feel organic while being fast enough to not impede workflow. The animation makes it clear which matrix was moved and where it went, addressing the issue where similar-looking matrices made reordering hard to follow.

• Fixes Investigate react pragmatic drag and drop #6

• Fixes Investigate react pragmatic drag and drop #6

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.